import Layout from '@components/layout';
import WorkList from '@components/WorkList';
import * as WorkApi from '@lib/api/work';
import { ICategory, IWork } from '@lib/types';
import { listAs, listHref, listUrl } from '@lib/url';
import { getCategory } from '@lib/utils';
import { Button, Dropdown, Icon, Menu, Pagination, Radio } from 'antd';
import Link from 'next/link';
import Router from 'next/router';
import * as React from 'react';
import { connect } from 'react-redux';
import './list.less';

interface ILoadParam {
	id: string;
	page: number;
	sort?: "time" | "vote";
}

interface ILoadResult {
	list: IWork[];
	total: number;
	size: number;
}

interface IListState {
	res: ILoadResult;
	load: ILoadParam;
}

interface IListProps {
	res: ILoadResult;
	category: ICategory[];
	load: ILoadParam;
}

async function loadWork(param: ILoadParam) {
	const res = await WorkApi.List({
		id: param.id,
		page: param.page,
		sort: param.sort || "create",
	});
	if (res instanceof Error) {
		return {};
	}
	return res
}

class List extends React.Component<IListProps, IListState> {
	static async getInitialProps(param: any) {
		const load = {
			id: param.query.id,
			page: parseInt(param.query.page, 10) || 1,
			sort: param.query.sort || "create",
		};
		const res = await loadWork(load);
		return {
			res,
			load
		};
	}
	constructor(props: any) {
		super(props);
		this.state = {
			res: this.props.res,
			load: this.props.load
		};
		this.onPageChange = this.onPageChange.bind(this);
	}
	public async componentWillReceiveProps(props: any) {
		const toSet: any = Object.assign({}, this.state);
		Object.keys(props).forEach(k => {
			if (typeof (toSet[k]) !== "undefined") {
				if (typeof (props[k]) === "object") {
					toSet[k] = Object.assign({}, props[k]);
				} else {
					toSet[k] = props[k];
				}
			}
		});
		this.setState(toSet);
		if (window) {
			window.scrollTo(0, 0);
		}
	}
	public onPageChange(page: number) {
		const url = listUrl(this.state.load.id, page, this.state.load.sort || "time");
		Router.push(url[0], url[1]);
	}
	public render() {
		const category = this.props.category.map(it => {
			return (
				<Radio.Button value={it.id} key={it.id}>
					<Link href={listHref(it.id, 1, this.state.load.sort || "time")} as={listAs(it.id, 1, this.state.load.sort || "time")}><a>{it.name}</a></Link>
				</Radio.Button>
			);
		});
		const sort = [["create", "发布时间"], ["time", "更新时间"], ["hot", "热度"], ["vote", "赞赏"]];
		const sortMenu = (
			<Menu>
				{sort.map(it => (<Menu.Item key={it[0]}><Link href={listHref(this.state.load.id, 1, it[0])} as={listAs(this.state.load.id, 1, it[0])}><a>按{it[1]}排序</a></Link></Menu.Item>))}
			</Menu>
		);
		const currentSort = sort.filter(it => it[0] === this.state.load.sort)[0];

		return (
			<Layout className="page-work-list" title={getCategory(this.props.category, parseInt(this.state.load.id, 10)) || "全部"}>
				<div style={{ marginBottom: "8px" }}>
					<Radio.Group value={this.state.load.id}>
						<Radio.Button value="all" key="all"><Link href="/work/list?id=all" as="/work/list/all"><a>全部</a></Link></Radio.Button>
						{category}
					</Radio.Group>
					<Dropdown overlay={sortMenu}>
						<Button>
							按{currentSort[1]}排序 <Icon type="caret-down" />
						</Button>
					</Dropdown>
				</div>
				<WorkList list={this.state.res.list} />
				<Pagination className="pagination" current={this.state.load.page} total={this.state.res.total} pageSize={this.state.res.size} onChange={this.onPageChange} />
			</Layout>
		);
	}
}

const mapStateToProps = (state: any) => ({
	category: state.category
});

export default connect(mapStateToProps)(List);